<template>
  <view class="page-container">
    <gradient-background>
      <custom-navbar title="工具" />
      
      <view class="content">
        <view class="tools-grid">
          <view 
            v-for="tool in tools" 
            :key="tool.id"
            class="tool-card"
            @tap="navigateToTool(tool)"
          >
            <view class="tool-icon">{{ tool.icon }}</view>
            <text class="tool-title">{{ tool.title }}</text>
            <text class="tool-desc">{{ tool.desc }}</text>
          </view>
        </view>
      </view>
    </gradient-background>
  </view>
</template>

<script>
export default {
  name: 'Tools',
  data() {
    return {
      tools: [
        {
          id: 1,
          title: '运势分析',
          icon: '🔮',
          desc: '查看今日/本周/本月运势',
          route: '/pages/tools/fortune/fortune'
        },
        {
          id: 2,
          title: '缘分配对',
          icon: '💕',
          desc: '生辰八字配对分析',
          route: '/pages/tools/compatibility/compatibility'
        },
        {
          id: 3,
          title: '数字解析',
          icon: '🔢',
          desc: '手机号、车牌号吉凶',
          route: '/pages/tools/numerology/numerology'
        },
        {
          id: 4,
          title: '姓名分析',
          icon: '📝',
          desc: '姓名五格数理分析',
          route: '/pages/tools/name-analysis/name-analysis'
        },
        {
          id: 5,
          title: '工作',
          icon: '💼',
          desc: '工作运势和职场分析',
          route: '/pages/tools/career/career'
        },
        {
          id: 6,
          title: '事业',
          icon: '🚀',
          desc: '事业发展和创业指导',
          route: '/pages/tools/business/business'
        },
        {
          id: 7,
          title: '寻人',
          icon: '👥',
          desc: '寻找失联人员方位',
          route: '/pages/tools/find-person/find-person'
        },
        {
          id: 8,
          title: '找物',
          icon: '🔍',
          desc: '失物寻找方位指引',
          route: '/pages/tools/find-object/find-object'
        },
        {
          id: 9,
          title: '起名',
          icon: '✨',
          desc: '起名建议和姓名测算',
          route: '/pages/tools/naming/naming'
        },
        {
          id: 10,
          title: '健康',
          icon: '🏥',
          desc: '健康状况运势分析',
          route: '/pages/tools/health/health'
        }
      ]
    }
  },
  methods: {
    navigateToTool(tool) {
      uni.navigateTo({
        url: tool.route
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
}

.content {
  padding: 32rpx;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.tool-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 32rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(106, 130, 251, 0.08);
  }
  
  .tool-icon {
    font-size: 64rpx;
    margin-bottom: 16rpx;
    display: block;
  }
  
  .tool-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8rpx;
  }
  
  .tool-desc {
    display: block;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.4;
    font-weight: 300;
  }
}
</style>